<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    :width="width"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    @close="handleClose"
  >
    <!-- 弹窗内容插槽 -->
    <slot></slot>

    <!-- 底部按钮插槽 -->
    <template #footer>
      <slot name="footer">
        <span class="dialog-footer">
          <el-button @click="handleCancel">{{ cancelText }}</el-button>
          <el-button type="primary" @click="handleConfirm">
            {{ confirmText }}
          </el-button>
        </span>
      </slot>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"

interface Props {
  // 是否显示弹窗
  modelValue: boolean
  // 标题
  title?: string
  // 宽度
  width?: string | number
  // 点击遮罩是否关闭
  closeOnClickModal?: boolean
  // 按ESC是否关闭
  closeOnPressEscape?: boolean
  // 是否显示关闭按钮
  showClose?: boolean
  // 取消按钮文本
  cancelText?: string
  // 确认按钮文本
  confirmText?: string
}

const props = withDefaults(defineProps<Props>(), {
  title: "提示",
  width: "30%",
  closeOnClickModal: false,
  closeOnPressEscape: true,
  showClose: true,
  cancelText: "取消",
  confirmText: "确定",
})

const emit = defineEmits(["update:modelValue", "cancel", "confirm"])

const dialogVisible = ref(props.modelValue)

// 监听modelValue变化
watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val
  },
)

// 监听dialogVisible变化
watch(
  () => dialogVisible.value,
  (val) => {
    emit("update:modelValue", val)
  },
)

// 取消
const handleCancel = () => {
  dialogVisible.value = false
  emit("cancel")
}

// 确认
const handleConfirm = () => {
  emit("confirm")
}

// 关闭
const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 